<template>
  <div class="ikun-login">
    <div class="login-box">
      <el-tabs v-model="loginType.activeName" @tab-click="handleClick">
        <el-tab-pane label="账号登录" name="account">
          <el-form :model="formData" :rules="rules" ref="ruleForm">
            <el-form-item prop="account">
              <el-input placeholder="账号" v-model="formData.account"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input placeholder="密码" v-model="formData.password" type="password"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="Mac登录" name="mac">
          <el-form :model="macForm" :rules="macRules" ref="macForm">
            <el-form-item prop="mac">
              <el-input v-model="macForm.mac" placeholder="请输入Mac地址">
                <template slot="append">
                  <el-button @click="showMac">查看本机Mac</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-row :gutter="20">
              <el-col :span="18">
                <el-form-item prop="nickname">
                  <el-input v-model="macForm.nickname" placeholder="请输入昵称" show-word-limit maxlength="12" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="region">
                  <el-select
                    v-model="macForm.region"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="province in provinces"
                      :key="province"
                      :label="province"
                      :value="province"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-drawer
          title="如何获取本机Mac地址"
          :visible.sync="drawer"
          :direction="direction"
          :before-close="handleClose">
          <v-md-preview :text="getMacHelpMd" />
        </el-drawer>
      </el-tabs>
      <div class="some-operate">
        <el-button type="text" @click="forgetPwd">忘记密码</el-button>
        <el-button type="text" @click="forgetPwd">找回密码</el-button>
      </div>

      <el-button type="primary" style="width:100%" @click="goToLogin()">登录</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { login, getUserInfo } from "@/api/index";
import { getMacHelpMd } from "@/assets/help/help";

import store from "../../store";

@Component({
  computed: {
    rules() {
      return {
        name: [
          { required: true, message: "账号必填", trigger: "blur" },
          { min: 4, message: "最少4个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码必填", trigger: "blur" },
          { min: 4, message: "最少4个字符", trigger: "blur" }
        ]
      };
    },
    macRules() {
      return {
        mac: [
          { required: true, message: "Mac地址不允许为空", trigger: "blur" }
        ],
        nickname: [
          { required: true, message: "昵称不允许为空", trigger: "blur" },
          { max: 12, message: "最多4个字符", trigger: "blur" }
        ],
        region: [
          { required: true, message: "区域不允许为空", trigger: "blur" }
        ]
      };
    }
  },
  components: {}
})

export default class Login extends Vue {
  formData = {
    account: "",
    password: "",
    type: 1
  };
  macForm = {
    mac: "",
    nickname: "",
    type: 0,
    region: "鲁"
  };
  provinces = [
    "京", "津", "冀", "晋", "蒙", "辽", "吉", "黑", "沪", "苏",
    "浙", "皖", "闽", "赣", "鲁", "豫", "鄂", "湘", "粤", "桂",
    "琼", "渝", "川", "贵", "云", "藏", "陕", "甘", "青", "宁",
    "新"
  ];
  direction = "rtl";
  drawer = false;
  getMacHelpMd = "";
  loginType = {
    activeName: "mac"
  };
  goToLogin = () => {
    debugger
    console.log(this.loginType.activeName);
    if (this.loginType.activeName === "account") {
      (this.$refs["ruleForm"] as any).validate((valid: boolean) => {
        if (valid) {
          login(this.formData).then((res: any) => {
            store.dispatch("setToken", res.data.token);
            getUserInfo().then((res: any) => {
              store.dispatch("setUserInfo", res.data);
              this.$router.push("/dld");
            });
          });
        }
      });
    }

    if (this.loginType.activeName === "mac") {
     this.macForm.mac =  this.macForm.mac.replaceAll(":", "-");
      (this.$refs["macForm"] as any).validate((valid: boolean) => {
        if (valid) {
          login(this.macForm).then((res: any) => {
            store.dispatch("setToken", res.data.token);
            getUserInfo().then((res: any) => {
              store.dispatch("setUserInfo", res.data);
              this.$router.push("/dld");
            });
          });
        }
      });
    }

  };

  forgetPwd() {
    this.$message.error("QQ群754126966问群友");
  }

  handleClick(tab: any) {
    this.loginType.activeName = tab.name;
    console.log(this.loginType.activeName);
  }

  showMac() {
    this.drawer = true;
    this.getMacHelpMd = getMacHelpMd();
  }

  handleClose() {
    this.drawer = false;
  }
}
</script>

<style lang="stylus">
@import "./style.styl"
</style>
